<template>
	<view>
		<u-skeleton rows="5" :loading="pageLoading" :rowsHeight="50" :title="false">
			<view class="head-wrap">
				<view style="position: relative; z-index: 9">
					<u-navbar leftIconColor="#fff" :bgColor="navBgColor" :border-bottom="false" :placeholder="true">
						<view slot="left" class="nav-left">
							<view @click="onBackJump" class="head-nav-item">
								<u-icon name="arrow-left" color="#fff"></u-icon>
							</view>
						</view>
						<view slot="center" style="font-weight: bold" :style="[navTitleStyle]">
							{{ topicInfo.name.substring(0, 10) }}
						</view>
					</u-navbar>
				</view>
				<image class="bg-img" mode="aspectFill" :src="topicInfo.bg_image"></image>
				<view class="mask-bg"></view>
				<view class="head-content">
					<view class="topic-head">
						<image class="cover-img" mode="aspectFill" :src="topicInfo.cover_image"></image>
						<view class="name-wrap">
							<text class="name">{{ topicInfo.name }}</text>
							<text class="user">圈主 [{{ topicInfo.userInfo.nickname || '无' }}]</text>
						</view>
						<view class="tool-menu-wrap">
							<navigator class="m-item" :url="'/pages/topic/setting?id=' + topicId">
								<u-icon name="/static/set.png" :size="18"></u-icon>
							</navigator>
							<navigator class="m-item" :url="'/pages/topic/qrcode?id=' + topicId">
								<u-icon name="/static/share_1.png" :size="18"></u-icon>
							</navigator>
						</view>
					</view>
					<navigator class="notice-txt" v-if="topicInfo.notice" :url="'../topic/notice?id=' + topicId">
						<view class="u-line-1">公告：{{ topicInfo.notice | replace }}</view>
						<view class="right-icon">
							<u-icon name="arrow-right" color="#fff"></u-icon>
						</view>
					</navigator>
					<view class="user-wrap">
						<text>
							<text style="margin-right: 10rpx">{{ topicInfo.user_num }}</text>
							圈友已加入
						</text>
						<navigator :url="'/pages/topic/user-list?id=' + topicId" class="right" hover-class="none">
							<u-avatar-group :urls="avatarUrls" size="20" gap="0.3" mode="aspectFill"></u-avatar-group>
							<u-icon name="arrow-right" color="#fff"></u-icon>
						</navigator>
					</view>
				</view>
			</view>
		</u-skeleton>
		<view class="content-main">
			<!-- 置顶 -->
			<view class="post-top-box" v-if="topicInfo.top_post && topicInfo.top_post.length > 0">
				<navigator @longpress="onTopDel(item, index)" class="post-item" :url="'/pages/post/detail?id=' + item.id" v-for="(item, index) in topicInfo.top_post" :key="index">
					<view class="tag">置顶</view>
					<view class="title u-line-1">{{ item.title || item.content.substring(0, 30) }}</view>
					<u-icon name="arrow-right" color="#000"></u-icon>
				</navigator>
			</view>
			<view v-else class="post-top-box"></view>
			<!-- 话题 -->
			<navigator :url="'/pages/discuss/detail?id=' + item.id" class="discuss-item" v-for="(item, index) in discussList" :key="index">
				<view class="icon">#</view>
				<view class="title u-line-1">{{ item.title }}</view>
			</navigator>
			<u-sticky :offset-top="tabSticky">
				<view style="background-color: #ffff">
					<!-- 分类tab -->
					<u-tabs
						:list="classList"
						lineColor="#000"
						:activeStyle="tabActiveStyle"
						:inactiveStyle="tabInactiveStyle"
						:is-scroll="false"
						:current="tabIndex"
						@change="tabsChange"
					></u-tabs>
				</view>
			</u-sticky>

			<q-post-list
				v-for="(calssItem, classIndex) in classList"
				:key="classIndex"
				v-show="classIndex == tabIndex"
				:list="calssItem.list"
				:loadStatus="loadStatus"
				:topic="topicInfo"
				:tips="listTips"
			></q-post-list>
		</view>
		<!-- 加入圈子弹窗 -->
		<u-modal
			:show="joinTopicModel"
			:show-cancel-button="true"
			@cancel="joinTopicModel = false"
			confirm-text="加入圈子"
			:content="'是否加入【' + topicInfo.name + '】?'"
			@confirm="joinTopic"
		></u-modal>

		<!-- 发布帖子按钮 -->
		<view v-if="topicInfo.id" @click="handelAdd('/pages/post/add')" class="plus-btn">
			<u-icon name="plus" color="#fff"></u-icon>
			<text class="text">发布动态</text>
		</view>

		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageLoading: true,
			showTopicPopup: false,
			joinTopicList: [],
			tabActiveStyle: {
				fontWeight: 'bold',
				fontSize: '35rpx'
			},
			tabInactiveStyle: {
				fontWeight: 'bold',
				fontSize: '30rpx'
			},
			showShare: false,
			joinTopicModel: false,
			tabIndex: 0,
			classList: [],
			topicInfo: {
				name: ''
			},
			postList: [],
			loadStatus: 'loading',
			page: 1,
			avatarUrls: [],
			classId: '',
			listTips: '',
			navBgColor: 'unset',
			navTitleStyle: {
				color: '#fff'
			},
			scrollTop: 0,
			topicId: null,
			discussList: []
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop > 150) {
			this.navBgColor = '#fff';
			this.navTitleStyle = {
				color: '#616161'
			};
		} else {
			this.navBgColor = 'unset';
			this.navTitleStyle = {
				color: '#fff'
			};
		}
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		},
		tabSticky() {
			return this.$u.addUnit(this.$u.getPx(uni.$u.props.navbar.height) + this.$u.sys().statusBarHeight, 'px');
		}
	},
	onLoad(options) {
		if (options.scene) {
			this.topicId = options.scene;
		}

		if (options.topic_id) {
			this.topicId = options.topic_id;
		}

		this.getUserList();
		this.getTopicInfo();
		this.getDiscussData();
		this.updateOpenTopicTime();
	},
	onReachBottom() {
		this.classList[this.tabIndex].page++;
		if (this.topicInfo.is_goods && this.tabIndex == 1) {
			this.getGoodsList();
		} else {
			this.getPostList();
		}
	},
	onPullDownRefresh() {
		this.classList[this.tabIndex].page = 1;
		this.classList[this.tabIndex].list = [];

		if (this.topicInfo.is_goods && this.tabIndex == 1) {
			this.$refs['goodsWaterfall'].clear();
			this.getGoodsList();
		} else {
			this.getTopicInfo();
		}

		uni.stopPullDownRefresh();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.topicInfo.name + '-' + this.topicInfo.description,
			path: '/pages/index/index?topic_id=' + this.topicId,
			imageUrl: this.topicInfo.bg_image
		};
	},
	onShareTimeline() {
		return {
			title: this.topicInfo.name + '-' + this.topicInfo.description,
			imageUrl: this.topicInfo.bg_image,
			query: 'topic_id=' + this.topicId
		};
	},
	filters: {
		substr: function (e) {
			return e.substr(0, 5);
		},
		replace(str) {
			if (str) {
				str = str.replace(/\n/g, '');
			}

			return str;
		}
	},
	methods: {
		getDiscussData() {
			this.$H
				.get('discuss/getListByTopicId', {
					topic_id: this.topicId
				})
				.then((res) => {
					this.discussList = res.result.data;
				});
		},
		updateOpenTopicTime() {
			this.$H.post('topic/updateOpenTime', {
				topic_id: this.topicId
			});
		},
		onTopicPopup() {
			this.showTopicPopup = false;
		},
		// 用户加入的圈子列表
		getUserJoinTopic() {
			this.$H.post('topic/currentUserJoinTopic').then((res) => {
				if (res.result.length > 0) {
					this.joinTopicList = res.result;
				}
			});
		},
		getTopicClass() {
			this.$H
				.get('topic/postClassList', {
					topic_id: this.topicId
				})
				.then((res) => {
					let classList = [
						{
							name: '推荐',
							page: 1,
							list: []
						}
					];

					//如果开启圈内好物
					if (this.topicInfo.is_goods === 1) {
						classList.push({
							name: this.topicInfo.goods_class_name,
							page: 1,
							list: []
						});
					}

					res.result.forEach((item) => {
						classList.push({
							...item,
							page: 1,
							list: []
						});
					});

					this.classList = classList;
					this.getPostList();
				});
		},
		getUserList() {
			this.$H
				.get('topic/userList', {
					page: this.page,
					id: this.topicId
				})
				.then((res) => {
					let userList = res.result.data;

					if (userList[0]) {
						this.avatarUrls.push(userList[0].avatar);
					}

					if (userList[1]) {
						this.avatarUrls.push(userList[1].avatar);
					}

					if (userList[2]) {
						this.avatarUrls.push(userList[2].avatar);
					}
				});
		},
		onTopDel(e, index) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否解除置顶?',
				success: function (res) {
					if (res.confirm) {
						that.$H
							.post('post/topPostDel', {
								post_id: e.id,
								topic_id: e.topic_id
							})
							.then((res) => {
								if (res.code == 1) {
									that.topicInfo.top_post.splice(index, 1);
								}
							});
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		tabsChange(e) {
			let index = e.index;
			this.tabIndex = index;

			if (this.classList[index].list.length === 0) {
				if (index === 1 && this.topicInfo.is_goods) {
					this.getGoodsList();
				} else {
					this.classId = e.id;
					this.getPostList();
				}
			}
		},
		handelAdd(url) {
			if (this.$store.state.hasLogin) {
				if (this.topicInfo.is_join) {
					uni.navigateTo({
						url: url + '?topic_id=' + this.topicId
					});
				} else {
					this.joinTopicModel = true;
				}
			} else {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			}
		},
		joinTopic() {
			this.$H
				.post('topic/joinTopic', {
					id: this.topicId
				})
				.then((res) => {
					if (res.code === 1) {
						this.topicInfo.is_join = true;
						this.joinTopicModel = false;
					}
				});
		},
		getTopicInfo() {
			this.$H
				.get('topic/detail', {
					id: this.topicId
				})
				.then((res) => {
					if (res.code == 1) {
						this.topicInfo = res.result;

						this.getTopicClass();
					}

					this.pageLoading = false;
				});
		},
		getGoodsList() {
			this.loadStatus = 'loading';
			let page = this.classList[this.tabIndex].page;
			this.$H
				.post('goods/getListByPage', {
					page,
					topic_id: this.topicId
				})
				.then((res) => {
					if (res.code == 1) {
						this.classList[this.tabIndex].list = res.result.data;

						if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					}
				});
		},
		getPostList() {
			this.loadStatus = 'loading';
			let page = this.classList[this.tabIndex].page;

			this.$H
				.get('post/list', {
					page,
					topic_id: this.topicId,
					class_id: this.classId
				})
				.then((res) => {
					if (res.code == 1) {
						this.classList[this.tabIndex].list = this.classList[this.tabIndex].list.concat(res.result.data);

						if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					} else {
						this.loadStatus = 'nomore';
						this.listTips = '圈子不存在或已关闭';
					}
				});
		},
		onBackJump() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack();
			} else if (pages.length === 1) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.head-wrap {
	height: 620rpx;
	position: relative;

	.bg-img {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);
	}

	.mask-bg {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
	}

	.head-content {
		position: relative;
		color: #eee;
		padding: 20rpx;

		.topic-head {
			display: flex;
			margin-bottom: 30rpx;

			.cover-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.name-wrap {
				flex: 1;
				display: flex;
				flex-direction: column;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.user {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.notice-txt {
			display: flex;
			margin-bottom: 30rpx;
			font-size: 28rpx;

			.right-icon {
				margin-left: auto;
			}
		}

		.user-wrap {
			display: flex;
			align-self: center;
			margin-bottom: 30rpx;

			.right {
				margin-left: auto;
				display: flex;
				align-self: center;
			}
		}
	}
}

.content-main {
	background-color: #fff;
	position: absolute;
	width: 100%;
	top: 480rpx;
	min-height: 80vh;
	border-radius: 30rpx;
}

// 置顶
.post-top-box {
	background-color: #fff;
	padding: 20rpx 20rpx 0 20rpx;
	border-radius: 20rpx 20rpx 0 0;

	.post-item {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: bold;

		.title {
			flex: 1;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.tag {
			background-color: $themes-color;
			color: #fff;
			padding: 0 10rpx;
			border-radius: 10rpx;
			font-size: 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			margin-right: 20rpx;
		}
	}
}

// 分享类型弹窗
.share-type {
	padding: 50rpx 30rpx;

	.type-item {
		background-color: #f5f5f5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		&:nth-child(2) {
			margin: 20rpx 0;
		}
	}
}

// 发布弹窗
.post-add-popup {
	display: flex;
	padding: 50rpx 0;

	.p-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		padding: 20rpx 0;
		border-radius: 20rpx;

		.icon {
			width: 100rpx;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
		}
	}
}

.handle-close {
	display: flex;
	justify-content: center;
	margin-bottom: 50rpx;
}

.tool-menu-wrap {
	.m-item {
		display: inline-block;
		padding: 15rpx;
		background-color: $themes-color;
		margin-left: 20rpx;
		border-radius: 50%;
	}
}

.plus-btn {
	position: fixed;
	bottom: 50rpx;
	background-color: $themes-color;
	display: flex;
	align-self: center;
	justify-content: center;
	border-radius: 100rpx;
	line-height: 1;
	padding: 20rpx 40rpx;
	margin-left: 38%;
	font-size: 28rpx;
	color: #fff;

	.text {
		margin-left: 10rpx;
	}
}

.topic-popup-wrap {
	padding-top: 50rpx;
	max-height: 70vh;
	overflow-y: auto;
}

.nav-left {
	display: flex;

	.head-nav-item {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;

		.nav-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.ai-avatar-wrap {
	padding: 30rpx;
	text-align: center;
	background-color: #ccf5ff;
	margin: 20rpx;
	border-radius: 100rpx;
	font-weight: bold;
	color: #00b8e6;
	font-size: 32rpx;
}

.discuss-item {
	margin: 0 20rpx 20rpx 20rpx;
	font-weight: bold;
	background-color: #f5f5f5;
	padding: 10rpx;
	border-radius: 20rpx;
	display: flex;

	.icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000;
		color: #fff;
		border-radius: 0 20rpx 0 20rpx;
		padding: 10rpx 20rpx;
		line-height: 1;
		margin-right: 20rpx;
		font-size: 28rpx;
	}
}
</style>
